<template>
  <div class="wrapper">
    <ul class="list">
        <li>
            <span>收货人姓名</span>
            <div class="right">
              <input type="text" placeholder="张三" class="detail-addr">
            </div>
        </li>
        <li>
            <span>手机号码</span>
            <div class="right">
                <input type="text" placeholder="155****5555" class="detail-addr" v-model="phoneNumber" @blur="checkPhone()">
                <i class="iconfont icon-jiantou"></i>
            </div>
        </li>
        <li>
            <span>收货地址</span>
            <div class="right">
                <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem" class="picker-wrapper">
                    <div class="picker">
                        {{region[0]}}  {{region[1]}}
                    </div>
                </picker>
                <i class="iconfont icon-jiantou"></i>
            </div>
        </li>
        <li>
            <span>详细地址</span>
            <div class="right">
                <input type="text" class="detail-addr" placeholder="请输入详细地址"/>
            </div>
        </li>
        <li>
            <span>设为默认地址</span>
            <div class="right">
              <switch checked class="switch"/>
            </div>
        </li>
    </ul>
    <div class="delete" @click="deleteAddress">
      <span class="iconfont">&#xe613;</span>
      <span>删除</span>
    </div>
    <div class="footer-btn">
      <span>保存</span>
      <span>取消</span>
    </div>
  </div>
</template>
<script>
import {showSuccess, showModelSucc} from '../../utils/index.js'
export default {
  data () {
    return {
      customItem: '',
      region: ['请选择', ''],
      phoneNumber: ''
    }
  },
  methods: {
    bindRegionChange: function (e) {
      console.log(e.mp.detail.value)
      this.region = e.mp.detail.value
    },
    deleteAddress () {
      showModelSucc('确定删除？')
    },
    checkPhone () {
      var regMobile = /^1[34578]\d{9}$/
      if (regMobile.test(this.phoneNumber) === false) {
        showSuccess('请输入正确手机号')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
html,body{
  background: #f4f4f4;
}
.list{
    background: #fff;
    padding: 0 30rpx;
    font-size: 28rpx;
    li{
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
        border-bottom: 1rpx solid #eee;
        span{
            line-height: 90rpx;
        }
        .right{
            position: relative;
            i{
                display: inline;
                position: absolute;
                right: 0rpx;
                top: 30rpx;
            }
            span{
                margin-right: 50rpx;
            }
            .picker-wrapper{
                margin-top: 20rpx;
                margin-right: 40rpx;
            }
            .detail-addr{
                margin-top: 20rpx;
                text-align: right;
            }
            .switch{
              transform: scale(0.7);
              margin-top: 2rpx;
            }
        }
        &:last-child{
            border-bottom: none;
        }
    }
}
.delete{
  font-size: 30rpx;
  color: #c63232;
  background: #fff;
  line-height: 100rpx;
  text-align: center;
  margin-top: 20rpx;
  span{
    vertical-align: top;
    &:first-child{
      font-size: 50rpx;
    }
  }
}
.footer-btn{
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  span{
    font-size: 30rpx;
    flex: 1;
    text-align: center;
    display: inline-block;
    width: 50%;
    height: 90rpx;
    line-height: 90rpx;
    color: #c63232;
    background: #fff;
    &:first-child{
      background: #22ac38;
      color: #fff;
    }
  }
}
</style>
